<template>
  <div>
    <a-spin :spinning="spinning" size="large">
      <a-form class="a_form_sty" @submit="handleInput" :form="orgform">
        <div class="selectcard">
          <a-row
            style="margin-bottom: 30px; display: flex; align-items: center"
          >
            <a-col :sm="{ span: 8 }">
              <div style="text-align: right; font-size: 20px; font-weight: 600">
                可提现余额（元）：
              </div>
            </a-col>
            <a-col :sm="{ span: 5, offset: 1 }">
              <div class="cash">{{ cash | cashfilter }}</div>
            </a-col>
          </a-row>
          <a-row>
            <!-- <a-form-item
              label="提现至"
              :label-col="{ span: 8}"
              :wrapper-col="{ span: 15,offset:1 }"
            >
            <a-select style="width:200px" :options="cashList" v-model="status" :key="cashList.value"></a-select>
            </a-form-item> -->
            <a-form-item
              label="银行卡信息"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 15, offset: 1 }"
            >
              <div class="cardmsg" style="font-weight: bold">
                {{ sites.accountName }}
                <br />
                {{ sites.bankName }} （{{ sites.cardNo | cardNofilter }}）
              </div>
            </a-form-item>
          </a-row>
        </div>

        <div class="amount">
          <a-form-item
            style
            label="提现金额"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 15, offset: 1 }"
          >
            <div class="cash_out">
              <a-input
                v-decorator="[
                  'amountt',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入数字',
                      },
                      { validator: validateCode },
                    ],
                  },
                ]"
                size="large"
                placeholder="请输入金额（元）"
              ></a-input>
              <!-- :defaultVisible="true" -->
              <span
                style="font-size: 14px; color: #29a576; margin-left: 10px"
                @click="allAashOut"
                >全部提现</span
              >
              <!-- <span class="tooltip_sty">单笔小于{{singleAmountLimit}}万，单日小于{{dayAmountLimit}}万</span> -->
            </div>

            <div style="color: #818181; font-size: 12px; text-align: left">
              额外扣除提现手续费{{ serviceCharge }}元/笔
            </div>
          </a-form-item>
          <a-row>
            <a-col :sm="{ span: 8 }"></a-col>
            <a-col :xs="{ span: 24 }" :sm="{ span: 10, offset: 1 }">
              <a-button
                :disabled="cashdisabled"
                :loading="loading"
                type="primary"
                html-type="submit"
                >下一步</a-button
              >
            </a-col>
          </a-row>
          <!-- <div style=" width: 188px;padding-top: 10px">
            <router-link to="/perindex">返回</router-link>
          </div>-->
        </div>
      </a-form>
      <a-modal
        class="modalClass"
        width="400px"
        :closable="false"
        :visible="visible"
        :footer="null"
      >
        <div class="setPsw">
          <div><span>您还未设置“支付密码” </span></div>
          <div><span>点击“确定”前往设置 </span></div>
          <div>
            <a-button type="primary" @click="toSetPayPsw">确定</a-button>
          </div>
        </div>
      </a-modal>
    </a-spin>
  </div>
</template>

<script>
import AHideData from "../common/HideData";
import { JSEncrypt } from "jsencrypt";
import api from "@/common/api";
export default {
  components: {
    AHideData,
  },
  data() {
    return {
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12, offset: 1 },
          md: { span: 10, offset: 1 },
        },
      },
      memberType: "",
      cash: "",
      sitesNo: "",
      demo: "",
      amountSum: "",
      bankCardNO: "",
      orgform: this.$form.createForm(this),
      secondBankList: [],
      sites: [],
      showAddbank: true,
      isshowAll: true,
      showAll: "展开",
      showAllBankList: false,
      radioStyle: {
        display: "block",
        height: "40px",
        lineHeight: "40px",
      },
      visible: false,
      defaultVisible: true,
      cashdisabled: true,
      radiovalue: "",
      loading: false,
      isbtn: false,
      spinning: false,
      customerOrg: {},
      customer: {
        status: "",
      },
      status: "bank",
      cashList: [
        { value: "bank", label: "银行卡" },
        { value: "yx", label: "营销账户" },
      ],
      // dayAmountLimit: "",
      // singleAmountLimit: "",
      serviceCharge: "",
      sensitive: 0,
      payPassword: "",
    };
  },
  filters: {
    cardNofilter(value) {
      if (value) {
        var reg = /.*(.{4})$/;
        return value.replace(reg, "**** **** **** $1");
      }
    },
    cashfilter(value) {
      return parseFloat(value / 100).toFixed(2);
      // return Number(value).toFixed(2)
    },
  },
  watch: {},
  created() {
    this.selectCBData();
    this.memberType = "BB";
  },
  mounted() {
    console.log("this.sites[0].accountNo", this.sitesNo);
    // this.radiovalue = this.sites[0].accountNo;
    // console.log('this.radiovalue',this.radiovalue)+
    this.sensitive = localStorage.getItem("sensitive");
    this.payPassword = sessionStorage.getItem("payPassword");
    if (this.sensitive == "1" && !this.payPassword) {
      this.visible = true;
    } else {
      this.visible = false;
    }
  },
  methods: {
    getRadioValue(value) {
      console.log(value);
      this.radiovalue = value;
      this.bankCardNO = value;
    },
    allAashOut() {
      if (this.cash > this.serviceCharge) {
        this.orgform.setFieldsValue({
          amountt: (
            (Number(this.cash) / 100).toFixed(2) - Number(this.serviceCharge)
          ).toFixed(2),
        });
      } else {
        alert("可提现金额小于手续费");
      }
    },
    goAddBank() {
      this.$router.push("/per/bankadd/bankno");

      sessionStorage.setItem("addbankType", "2"); //1 为正常添加银行卡 2 为提现添加 3充值添加
    },
    handleInput(e) {
      e.preventDefault();
      if (this.bankCardNO !== "") {
      } else {
        this.$message.warning("银行卡信息获取失败");
        return false;
      }
      this.orgform.validateFields((err, values) => {
        if (!err) {
          if (
            Number(values.amountt) >
            Number(this.cash) / 100 - Number(this.serviceCharge)
          ) {
            this.$message.error("提现金额大于可提现金额");
            return false;
          }
          // if( Number(values.amountt) >  Number(this.singleAmountLimit)*1000000){
          //    this.$message.error("超过单笔金额上限");
          //    return false;
          // }
          // if( (Number(values.amountt)+ Number(this.amountSum)) > this.dayAmountLimit*1000000){
          //    this.$message.error("已超过单日累计提现金额");
          //    return false;
          // }
          this.loading = true;
          this.$axios
            .post("/agent/withdraw/market/verifyAvailableBalance", {
              accountNo: this.bankCardNO,
              cashWithdrawal: values.amountt * 100,
            })
            .then((res) => {
              this.loading = false;
              console.log(res.data);
              if (res.data.code == "OK") {
                // console.log(values.amountt);

                if (this.sensitive == "1") {
                  this.$router.push({
                    name: "营销账户提现确认",
                    params: {
                      seat: res.data.data,
                    },
                  });
                } else {
                  let data = {};
                  data.amount = res.data.data.cashWithdrawal;
                  data.accountNo = res.data.data.bankCardDTO.accountNo;
                  data.key = res.data.data.bankCardDTO.accountNo;
                  data.mobileNo = res.data.data.mobile;
                  data.code = "";
                  data.payPassword = "";
                  this.$axios
                    .post("/agent/withdraw/market/toWithdrawal", data)
                    .then((res) => {
                      if (res.data.code == "OK") {
                        this.$router.push({
                          name: "提现完成",
                          params: {
                            amount: values.amountt * 100,
                            market: "market",
                          },
                        });
                      } else if (res.data.code == "LIMIT_FAIL") {
                        this.$message.error(res.data.message);
                      }
                    });
                }
              } else if (res.data.code == "LIMIT_FAIL") {
                // let messagelist = res.data.message.split("限额:")

                // let message = messagelist[0] + "限额:" + Number(messagelist[1])/100 + "元"

                // this.$message.error(message);
                this.$message.error(res.data.message);
              } else {
                this.$message.error(res.data.message);
              }
            });
        }
      });
    },
    validateCode(rule, value, callback) {
      // let reg = new RegExp('[\\u4E00-\\u9FFF]+', 'g')
      // ([1-9][0-9]*(\.\d{1,2})?)|(0\.\d{1,2})
      // if (value && !/^[0-9]*[1-9][0-9]*$/.test(value)) {
      // value = value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''

      if (
        value &&
        !/(^([1-9][0-9]*)(\.[0-9]{1,2})?$|^(0\.[0-9]{1,2})$)/.test(value)
      ) {
        // if (!value) {
        callback("请输入正确的金额！");
        return;
      } else {
        //console.log(value);

        callback();
      }
    },
    onChange(e) {
      this.bankCardNO = e.target.value;
    },

    selectCBData() {
      // this.spinning = true;
      this.$axios.get("/agent/withdraw/market/selCashCard").then((res) => {
        if (res.data.code == "OK") {
          this.spinning = false;

          if (res.data.data == null) {
            this.$message.error("未查询到绑定银行卡数据");
            this.$router.push("/userMain");
          }
          if (res.data.data.serviceCharge != null) {
            this.serviceCharge = res.data.data.serviceCharge / 100;
            this.cashdisabled = false;
          } else {
            this.serviceCharge = 0;
            this.$message.error("获取提现手续费失败，请刷新重试");
            this.cashdisabled = true;
          }

          this.amountSum = res.data.data.amountSum;
          this.cash = res.data.data.availableBalance;
          this.sitesNo = res.data.data.list[0].accountNo;

          this.sites = res.data.data.list[0];
          this.radiovalue = this.sitesNo;
          this.bankCardNO = this.sitesNo;

          // this.sites = [res.data.data.list[0].bankName,res.data.data.list[0].memberNo];
          // this.cardname = res.data.data.list[0].bankName;
        }
      });
    },
    showAllbank() {
      this.showAllBankList = !this.showAllBankList;
      this.showAll = !this.showAllBankList ? "展开" : "折起";
    },
    toSetPayPsw() {
      this.visible = false;
      this.$router.push("/org/safeset/modifypayindex");
    },
  },
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}

.a_form_sty {
  width: 70%;
  margin-left: 50px;
  padding-top: 10vh;
}

.cash {
  font-size: 26px;
  font-weight: bold;
  color: #29a576;
}

.group {
  display: flex;
  flex-direction: column;
}

.next {
  display: flex;
  flex-direction: row;
  width: 188px;
  margin: 0 auto;

  text-align: center;
}

.radio_card {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

ul {
  padding-left: 0;
}

.li_radio_style {
  list-style: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 2px 10px;
  /* display: flex;
    align-items: center; */
  margin-bottom: 10px;
  width: 100%;
  overflow: hidden;
}

.bank_img {
  display: flex;
  align-items: center;
  float: left;
  height: 39px;
}

.li_radio_style img {
  width: 25px;
  height: 25px;
  vertical-align: middle;
  margin: 0 1%;
  float: left;
}

.li_radio_style .bank_info {
  float: left;
  margin-left: 2%;
}

.li_radio_style i {
  color: #153056;
  margin-right: 2%;
  float: right;
  font-stretch: normal;
}

.addBank {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: -15px;
}

.tooltip_sty {
  color: #29a576;
}

#addBank {
  cursor: pointer;
  margin-top: 8px;
  border: 1px solid #bbb;
  border-radius: 5px;
  text-align: left;
  padding: 0px 10px;
  width: 100%;
}

.ant-tooltip-inner {
  border: 1px solid #153056;
  color: #153056;
  background-color: transparent !important;
}

.tooltip_sty {
  margin-left: 20px;
  color: #3b9fe2;
  padding: 0 15px;
  font-size: 12px;
  background-color: #f5fcff;
  border: 1px solid #3b9fe2;
  border-radius: 4px;
  position: relative;
  line-height: 30px;
}

.tooltip_sty:before {
  content: "";
  position: absolute;
  left: -17px;
  top: 50%;
  margin-top: -8px;
  border: 8px solid transparent;
  border-right-color: #3b9fe2;
}

.tooltip_sty:after {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  margin-top: -8px;
  border: 8px solid transparent;
  border-right-color: white;
}

.cash_out {
  display: flex;
  align-items: center;
}

.selectcard .ant-radio-checked .ant-radio-inner {
  border-color: #29a576;
}

.selectcard .ant-radio-inner:after {
  background-color: #29a576;
}

.cash_out input {
  width: 40%;
}

.cardmsg {
  text-align: left;
}
.setPsw {
  text-align: center;
  font-size: 16px;
  div {
    margin-bottom: 10px;
  }
}
</style>